

<template>
  <q-markup-table separator="cell" >
    <thead  >
    <tr bgcolor="#f0f8ff">
      <!--             <th class="text-left">序号</th>-->
<!--      <th  class="text-center">序号</th>-->
      <th  class="text-center">内容</th>
      <th class="text-center">复制时间</th>
      <!--      <th class="text-center">进入对话</th>-->
      <th class="text-center">复制</th>
      <th class="text-center">删除</th>
      <!--             <th class="text-center">类型</th>-->
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,index) in ClipList">
      <!--             <td class="text-left">{{index+1}}</td>-->


      <td class="text-center truncate hover:cursor-pointer"  width="300px" >
        <!--如果剪贴板有数据-->
        <div v-if="item.content && item.content.length > 0">
          <span >{{truncatedText(item.content,props.ShowContentSize)}}</span>
          <q-tooltip v-if=" item.content.length > props.ShowContentSize">{{truncatedText(item.content,200)}}</q-tooltip>
        </div>
      </td>

      <td class="text-center text-blue"  width="90px">
          {{ParseGoDateStr(item.created_at)}}
      </td>


      <td class="text-center text-blue"  width="60px">
        <q-btn outline style="color: #00aeff;" class="hover:bg-gray-400" @click="copy(item.content)">
          复制
          <!--          <i style="font-size: 18px" class="fas fa-delete-left"></i>-->
        </q-btn>
      </td>
      <td class="text-center text-blue"  width="60px">
        <q-btn outline style="color: darkorange;"  class="hover:bg-gray-400" @click="deleteChatDialog(item.id)">
          删除
          <!--          <i style="font-size: 18px" class="fas fa-delete-left"></i>-->
        </q-btn>
      </td>
      <!--             <td class="text-center text-blue">{{item["OptType"]}}</td>-->
    </tr>
    </tbody>
  </q-markup-table>
  <div class="text-center my-2 mr-2">
    <q-btn outline class="ml-1"  color="gray" :label="CurrDialogPage+'/'+TotalPageDialog" />
    <q-btn :disable="CurrDialogPage==1" outline class="ml-1" color="primary" label="上一页" @click="LastPage()" />
    <q-btn :disable="CurrDialogPage==TotalPageDialog" outline class="ml-1" color="primary" label="下一页"  @click="NextPage()" />
  </div>
</template>
<script setup lang="ts">
import {defineEmits, defineProps, onMounted, ref} from "vue"
import {ParseGoDateStr} from "../utils/dates";
import {ToastError, ToastInfo} from "../utils/Toast";
import {dbdto} from "../../wailsjs/go/models";
import {RespCodeOk} from "../constant/enums/RespCode";
import {useGlobalStore} from "../store/global";
import {useWindowsStore} from "../store/windows";
import {EntryChatDialog} from "../core/EntryLastDialog";
import {DelClipboard, GetListClipboardList} from "../../wailsjs/go/dbservice/ClipboardService";
import {ClipboardSetText} from "../../wailsjs/runtime";

let storeGlobal=ref(useGlobalStore())
let storeWin=ref(useWindowsStore())
//获取对话纪录
let ClipList =ref<Array<dbdto.ClipboardInfo>>([])
let CurrDialogPage=ref(1)
let DialogPageSize=ref(6)
let TotalPageDialog=ref(1)
let emits=defineEmits(["ClosePop"])

let props=defineProps({

  PageSize:{
    type:Number,
    default:6
  },
  ShowContentSize:{
    type:Number,
    default:10
  },
})

function copy(content:string){
  ClipboardSetText(content)
  ToastInfo("已经复制到剪贴板")
  GetDialogRecord()
}
function deleteChatDialog(id:number){
  DelClipboard(id).then(res=>{
    if(res.code == RespCodeOk){
      ToastInfo("已删除")
      GetDialogRecord()
    }else{
      ToastError(res.msg)
    }

  })

}


function EntryDialog(id:number){
  EntryChatDialog(id)
  emits("ClosePop")
}

onMounted(()=>{
  CurrDialogPage.value=1
  DialogPageSize.value=props.PageSize
  GetDialogRecord()
})

function GetDialogRecord(){
  GetListClipboardList(CurrDialogPage.value,DialogPageSize.value).then(res=>{
    if(res.list){
      TotalPageDialog.value=Math.ceil(res.total/DialogPageSize.value )
      ClipList.value=res.list
    }else{
      TotalPageDialog.value=0
      CurrDialogPage.value=0
      ClipList.value=[]
      //ToastInfo("数据为空")
    }
  })
}

function NextPage(){
  CurrDialogPage.value +=1
  GetDialogRecord()
}
function LastPage(){
  CurrDialogPage.value -=1
  GetDialogRecord()
}

function truncatedText(text:string,maxLength:number=10) :string{
  if (text.length <= maxLength) {
    return text;
  } else {
    return text.slice(0, maxLength) + "...";
  }
}



</script>
<style scoped>

</style>